import React, { useEffect, useRef, useState } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { Tag, Card, Modal } from 'antd';
import { connect } from 'umi';
import PopImgShow from '@/components/PopImgShow';

const Record = (props) => {
  const { loading, list, visible = {}, onClose } = props;
  const { show, details = {} } = visible;
  const { id } = details;
  const searchItems = [
    {
      label: '账号类型',
      name: 'accountType',
      type: 'select',
      select: {
        company: '公司',
        personal: '个人',
      },
    },

    {
      label: '状态',
      name: 'status',
      type: 'select',
      select: {
        0: '否',
        1: '是',
      },
    },
  ];
  const childRef = useRef();

  const getColumns = [
    {
      title: '账号类型',
      dataIndex: 'accountType',
      render: (e) => {
        return {
          company: '公司',
          personal: '个人',
        }[e];
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '未发布',
          1: '已发布',
          2: '失败',
        }[e];
      },
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow url={e}></PopImgShow>;
      },
    },
  ];

  const modalProps = {
    title: `授权账号列表`,
    width: 800,
    visible: typeof visible === 'boolean' ? visible : show,
    // maskClosable: true,
    // destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  useEffect(() => {
    if (id) {
      handleCallback();
    }
  }, [id]);
  return (
    <Modal {...modalProps} onCancel={onClose}>
      <TableDataBlock
        cRef={childRef}
        firstFetch={false}
        loading={loading}
        searchItems={searchItems}
        params={{ publishId: id }}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="redBooklet/fetchMediaPublishAccount"
        {...list}
      ></TableDataBlock>
    </Modal>
  );
};
export default connect(({ loading, redBooklet }) => ({
  list: redBooklet.mediaPublishAccountList,
  loading: loading.models.redBooklet,
}))(Record);
